今天和大家介紹第二種寫法：自行編輯Flex Message語法，客製化聊天機器人回覆訊息。

基本架構

首先先詳細的介紹彈性配置的基本架構

• Flex Message由三層嵌套數據結構組成：Container 容器 > Block 區塊 > Component 元件
• 其中又分成四個區塊：header 頁首, hero 主要圖片區, body 主要內容區, footer頁尾

• BubbleContainer
  BubbleContainer即為整個彈性配置區塊，其direction屬性為設定元件水平排列時的排列方向：ltr(由左至右)、rtl(由右至左)，預設為「ltr」。

Component 元件介紹

1. BoxComponent 元件

為建立一個矩形區塊，區塊可放置其他彈性配置元件，也是使用最多的彈性配置元件。

常用屬性

• layout 元件排列方式：
  horizontal：水平排列
  vertical：垂直排列
  baseline：水平排列，元件對齊基準線
• spacing 各元件最小距離：
  由小到大為：none、xs、sm、md、lg、xl、xxl
• margin 與前一個元件最小距離：
  由小到大為：none、xs、sm、md、lg、xl、xxl

練習程式

BoxComponent( 
    layout = 'vertical',
    spacing='md',
    margin='sm',
    contents = [
        TextComponent(...),  #元件一
        IconComponent(...),  #元件二
        ...
    ]
),

2. TextComponent 元件

為顯示文字的彈性配置元件

常用屬性

• flex 所占寬度比例
  水平排列預設值為1，垂直排列預設為0

• size 文字比例
  由小到大為：xxs、xs、sm、md、lg、xl、xxl、3xl、4xl，預設為「md」
• align 水平排列方式
  start：靠左對齊，為預設值
  end：靠右對齊
  center：置中對齊
• gravity 垂直排列方式
  top：靠上對齊，為預設值
  bottom：靠下對齊
  center：置中對齊
• weight 是否粗體
  regular：不顯示粗體，為預設值
  bold：顯示粗體

練習程式

TextComponent(
    text = '國立臺北教育大學', 
    weight='bold', 
    size='lg'
    flex=2,
    align='center',
    color='##0070C0'
)

3. ImageComponent 元件

為顯示圖片的彈性配置元件

常用屬性

• url 圖片網址
  圖片網址必須為https開頭，無法使用電腦上傳圖片檔案
• aspect_ratio 圖片長寬比例
  圖片長寬比例預設值為1:1
• aspect_mode 顯示模式
  cover：照片填滿整個區域，圖片邊緣可能被裁剪掉
  fit：顯示整張圖片，顯示區域有可能留下空白，為預設值

練習程式

ImageComponent(
    url='https://i.imgur.com/3sBRh08.jpg',
    size = 'full', #圖片最大尺寸為full
    aspect_ratio = '700:700', 
    aspect_mode = 'cover',
),

4. BottonComponent 元件

為建立按鈕的彈性配置元件

常用屬性

• action 執行動作
  為使用者點選按鈕時執行的動作
• style 按鈕樣式
  link：HTML連結樣式，為預設值
  primary：暗色樣式
  secondary：亮色樣式
• color 顏色
  若style=link，color為設定文字顏色
  若style=primary或secondary，color為設定按鈕背景顏色

練習程式

ButtonComponent(
    action = URIAction(label='查看網頁',uri='https://www.ntue.edu.tw/'),
    style = 'primary',
    height= 'sm',
    color='##0070C0'
)

5. IconComponent 元件

為顯示Icon圖示的彈性配置元件

6. SeparatorComponent 元件

為顯示水平線的彈性配置元件

程式練習

需於func.py最上方匯入模組

func.py程式碼

def sendFlex(event):
    try:
        bubble = BubbleContainer(
            direction = 'ltr', 
            header = BoxComponent( #標題
                layout = 'vertical',
                contents = [
                    TextComponent(text = '國立臺北教育大學', weight='bold', size='lg'),
                ]
            ),
            hero = ImageComponent( #主圖片
                url='https://i.imgur.com/UzSXGRX.jpg',
                size = 'full',
                aspect_ratio = '700:700',
                aspect_mode = 'cover',
            ),
            body = BoxComponent( #主要內容
                layout = 'vertical',
                contents = [
                    TextComponent(text='評價', size='md'),
                    BoxComponent(
                        layout = 'baseline', 
                        margin='md',
                        contents=[
                            IconComponent(size='lg', url = 'https://i.imgur.com/GsWCrIx.png'),
                            TextComponent(text='25', size='sm', color='#999999', flex=0),
                            IconComponent(size='lg', url = 'https://i.imgur.com/sJPhtB3.png'),
                            TextComponent(text='14', size='sm', color='#999999', flex=0),
                        ]
                    ),
                    BoxComponent(
                        layout = 'vertical', 
                        margin='lg',
                        contents=[
                            BoxComponent(
                                layout = 'baseline', 
                                contents=[
                                    TextComponent(
                                        text='營業地址', 
                                        size='sm', 
                                        color='#aaaaaa', 
                                        flex=2
                                    ),
                                    TextComponent(
                                        text='臺北市大安區和平東路2段134號', 
                                        size='sm', 
                                        color='#666666', 
                                        flex=5
                                    ),
                                ]
                            ),

                            SeparatorComponent(color='#0000FF'),

                            BoxComponent(
                                layout = 'baseline', 
                                contents=[
                                    TextComponent(
                                        text='營業時間', 
                                        size='sm', 
                                        color='#aaaaaa', 
                                        flex=2
                                    ),
                                    TextComponent(
                                        text='10:00 - 23:00', 
                                        size='sm', 
                                        color='#666666', 
                                        flex=5
                                    ),
                                ]
                            ),                  
                        ]
                    ),
                    BoxComponent(
                        layout = 'horizontal',
                        margin='xxl',
                        contents=[
                            ButtonComponent(
                                style = 'primary',
                                height= 'sm',
                                action = URIAction(
                                    label='電話聯絡',
                                    uri='tel:0227321104'
                                ),
                            ), 
                            ButtonComponent(
                                style = 'secondary',
                                height= 'sm',
                                action = URIAction(
                                    label='查看網頁',
                                    uri='https://www.ntue.edu.tw/'
                                ),
                            )
                        ]
                    )
                ],
            ),
            footer = BoxComponent(
                layout = 'vertical',
                contents = [
                    TextComponent(
                        text='Copyright @ntue', 
                        color = '#888888', 
                        size='sm', 
                        align='center'
                    ),
                ]
            ),
        )
        message = FlexSendMessage(alt_text="彈性配置範例", contents=bubble)
        line_bot_api.reply_message(event.reply_token,message)

    except:
        line_bot_api.reply_message(event.reply_token,TextSendMessage(text='發生錯誤!'))

第一步驟可建立圖文選單以方便樣板訊息的測試，圖文選單可參考DAY5的貼人賽文章哦，而下方測試畫面的網頁連結就先省略範例示圖~

接下來和大家介紹DAY11 Flex message（上篇）中有提到的LIFF吧( •̀ ω •́ )✧